<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
adding style rules
</title>
<style type="text/css"></style>
<script type="text/javascript">
function appendStyleRule (ruleSet) {
  if (document.styleSheets) {
    if (document.styleSheets.length == 0) {
      appendStyleElement();
    }
    if (document.styleSheets.length > 0) {
//      document.styleSheets[0].deleteRule(
      if (document.styleSheets[0].insertRule) {
        document.styleSheets[document.styleSheets.length -1].
          insertRule(ruleSet, document.styleSheets[document.styleSheets.length - 1].
          cssRules.length);
      }
      else if (document.styleSheets[0].addRule) {
        var ruleSetPattern = /(.*)({([^}]*)})/;
        var match = ruleSetPattern.exec(ruleSet);
        if (match) {
          var selector = match[1];
          var declarations = match[3];
          document.styleSheets[document.styleSheets.length - 1].addRule(selector, declarations);
        }
      }
    }
  }
}
function appendStyleElement () {
  if (document.createElement) {
    var styleElement = document.createElement('style');
    if (styleElement) {
      styleElement.type = 'text/css';
      var headElement = document.getElementsByTagName('head')[0];
      headElement.appendChild(styleElement);
    }
  }
}

	function replace(doc, styleName, newDeclaration) {
		var styleSheets = doc.styleSheets;
		if (styleSheets) {
			if (doc.styleSheets.length == 0) {
				appendStyleStyleElement();
			}
			var x = styleSheets[0].rules;
			var y = styleSheets[0].cssRules;
			if (x) {
				for (var i = 0; i < x.length; ++i) {
					if (x[i].selectorText.toUpperCase() == styleName.toUpperCase()) {
//						alert("remove " + x[i].selectorText.toUpperCase());
						styleSheets[0].removeRule(i);
						break;
					}
				}
				var ruleSetPattern = /(.*)({([^}]*)})/;
				var match = ruleSetPattern.exec(newDeclaration);
				if (match) {
				  var selector = match[1];
				  var declarations = match[3];
				  doc.styleSheets[0].addRule(selector, declarations);
//				  alert("add" + i);
				}
			}
			else if (y) {
				for (var i = 0; i < y.length; ++i) {
					if (y[i].selectorText.toUpperCase() == styleName.toUpperCase()) {
//						alert("delete " + y[i].selectorText.toUpperCase());
						styleSheets[0].deleteRule(i);
						break;
					}
				}
				styleSheets[0].insertRule(newDeclaration, doc.styleSheets[0].cssRules.length);
//				alert("insert " + i);
			}
		}
	}

	function showStyles() {
		var x = document.styleSheets[0].cssRules;
		var y = document.styleSheets[0].rules;

		if (x) {
			for (var i = 0; i < x.length; ++i) {
				alert("cssRule(" + i + "): " + x[i].selectorText);
			}
		}
		else if (y) {
			for (var i = 0; i < y.length; ++i) {
				alert("cssRule(" + i + "): " + y[i].selectorText);
			}
		}

	}

   function getProperties(x) {
       var outtext = "";
       var counter = 0;
       for (var i in x) {
           outtext = outtext + "*** " + i + ": " + x[i] + "\n";
           counter++;
           if (counter>=5){
               confirm(outtext);
               outtext = "";
               counter = 0;
           }
       }
       if (outtext != "") {
           confirm(outtext);
       }
   }

</script>
</head>
<body onload="replace(document, 'body', 'body { color: blue; background-color: yellow}');
              replace(document, 'p', 'p { color: orange; border: 3px solid orange;}')">
Kibology
<p>All for Kibology</p>
<h1>some h1 text</h1>
<input type="button" onclick="replace(document, 'h1', 'h1 { color: red; font-size: 24pt}');" name="name" value="value">
<input type="button" onclick="showStyles();" name="name" value="value">
<input type="button" onclick="replace(document, 'h1', 'h1 { color: green; font-size: 4pt}');" name="name" value="value">
</body>
</html>